<!-- PAGE -->
  <section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar mini-menu">
      <div class="sidebar-menu nav-collapse">
        <div class="divide-20"></div>
        <!-- SEARCH BAR -->
        <div id="search-bar">
          <input class="search" type="text" placeholder="Tìm kiếm" /><i class="fa fa-search search-icon"></i>
        </div>
        <!-- /SEARCH BAR -->
          <ul>
            <li id="radio" idLi="">
              <a href="javascript:void(0)">
                <img class="draggable" src="<?php echo base_url().'media/control/radio.png';?>" alt="radio button"> 
                <span class="menu-text">Câu hỏi nhiều lựa chọn</span>
              </a>
            </li>
            <li id="checkbox" idLi="">
              <a href="javascript:void(0)" title="Kéo và thêm một câu hỏi Checkbox">
                <img class="draggable" src="<?php echo base_url().'media/control/checkbox.png';?>" alt="checkbox"> 
                <span class="menu-text">Câu hỏi checbox</span>
              </a>
            </li>
            <li id = "textbox" idLi="">
              <a href="javascript:void(0)"  title="Kéo và thêm một câu hỏi văn bản ngắn (trên 1 dòng)">
                <img class="draggable" src="<?php echo base_url().'media/control/textbox.png';?>" alt="textbox"> 
                <span class="menu-text">Câu hỏi trả lời ngắn</span>
              </a>
            </li>
            <li id="textarea" idLi="">
              <a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" title="Kéo và thêm một câu hỏi văn bản dài (trên nhiều dòng)">
                <img class="draggable" src="<?php echo base_url().'media/control/textarea.png';?>" alt="textarea"> 
                <span class="menu-text">Câu hỏi trả lời dài</span>
              </a>
            </li>
            <li id="dropdown" idLi="">
              <a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" title="Kéo và thêm một câu hỏi DropDown">
                <img class="draggable" src="<?php echo base_url().'media/control/dropdownlist.png';?>" alt="dropdownlist"> 
                <span class="menu-text">Câu hỏi lựa chọn loại 1</span>
              </a>
            </li>
            <li id="multitextbox" idLi="">
              <a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" title="Kéo và thêm một danh sách các câu hỏi văn bản ngắn">
                <img class="draggable"  src="<?php echo base_url().'media/control/group-text.png';?>" alt="dropdownlist"> 
                <span class="menu-text">Câu hỏi lựa chọn loại 2</span>
              </a>
            </li>
            <li id="upload" idLi="">
              <a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" title="Kéo và thêm một câu hỏi Upload tập tin">
                <img class="draggable"  src="<?php echo base_url().'media/control/attach.png';?>" alt="dropdownlist"> 
                <span class="menu-text">Tải tập tin</span>
              </a>
            </li>
            <li idLi="">
              <a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" title="Kéo và thêm một câu hỏi phân loại">
                <img class="draggable"  src="<?php echo base_url().'media/control/ranking.png';?>" alt="dropdownlist"> 
                <span class="menu-text">Câu hỏi phân loại</span>
              </a>
            </li>
            <li id="table" idLi="">
              <a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" title="Kéo và thêm một câu hỏi dạng bảng (table)">
                <img class="draggable"  src="<?php echo base_url().'media/control/table.png';?>" alt="dropdownlist"> 
                <span class="menu-text">Câu hỏi dạng bảng</span>
              </a>
            </li>
         
        </div>
      </div>
  </div>
  <!-- /SIDEBAR -->
    <div id="main-content"  class="margin-left-50">
      <script type="text/javascript">
        $(document).ready(function() {
          $('.sidebar-menu ul li').removeClass('ui-draggable');
          $('.sidebar-menu ul li').removeClass('active_sidebar');
          var i = 1;
          $('.sidebar-menu ul li').hover(function() {

            $('.sidebar-menu ul li').each(function() {

              if($(this).hasClass('active_sidebar')) {
                $(this).removeClass('active_sidebar');

              }
            });
           $( this ).addClass( "active_sidebar" ).stop( true, true );
           $( this ).attr('idli',i);
           i++;

            $( ".sidebar-menu ul li.active_sidebar" ).draggable({
              revert: 'invalid',
              helper:"clone",
              snap: "#content-survey",
              opacity: 0.7
            });

            $( "#content-survey" ).droppable({

              // accept only from left div,
              // this is necessary  to prevent clones duplicating inside droppable
              accept: '.sidebar-menu ul li',
              over: function(event, ui) {
                 $( this ).append('<div id="wrapContentSurvey" style="background: none repeat scroll 0 0 #434343;border: 1px dotted #CCCCCC;height: 30px;opacity: 0.8;"></div>');
              },
              out: function(event, ui) {
                 $('#wrapContentSurvey').remove();
              },
              drop: function( event, ui ) {
                $('#wrapContentSurvey').remove();
                var idDrop = $('.sidebar-menu ul li.active_sidebar').attr('id');
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url("member/createsurvey/createquestion"); ?>',
                    data: {idDrop:idDrop},
                    success: function(result) {
                      var pathname = window.location.pathname;
                      var idSurvey = pathname.split('/');
                      window.location.href = '<?php echo base_url(); ?>tao-cau-hoi-khao-sat/'+result+'/'+idSurvey[3]+'';
                    }
                });
                $('#idDrop').val(idDrop);
                // 4 append clone to droppable
                var idLi = $('.sidebar-menu ul li.active_sidebar').attr('idli');

                $( this ).append('<p class="'+idLi+'">ajsdkasjkdjasd<br /> <span>Remove</span></p>');
                $('p.'+idLi+' span').bind('click', function() {
                  $('p.'+idLi+'').remove();
                  // remove field model
                });
              }
            });
          },function() {
            $('.sidebar-menu ul li').removeClass('ui-draggable');
          });
        });
      </script>